<template>
  <div class="detail">
     <div class="navBar"><van-icon name="arrow-left"  @click="$router.back()" /><p>{{detailObject.community}}</p><van-icon name="share-o" /></div>
     <div class="detailMain">
      <Swiper :swiperData="swiperData"/>
      <div class="detailInfo">
        <div class="top">
          <p>{{detailObject.title}}</p>
         <div class="tags"><span  v-for="(tag,index) in detailObject.tags" :key="index" >{{tag}}</span></div>
        </div>
        <div class="middle">
          <div class="item">
            <p> {{detailObject.price}}元<i>/月</i></p>
            <span>租金</span>
        </div>
        <div class="item">
            <p>{{detailObject.roomType}}</p>
            <span>房型</span>
        </div>
        <div class="item">
            <p>{{detailObject.size}}平米</p>
            <span>面积</span>
        </div>
      </div>
      <div class="bottom">
        <div class="tags"><p>装修:</p><span>精装</span></div>
        <div class="tags"><p>朝向:</p><span v-for="(orient,index) in detailObject.oriented" :key="index">{{orient}}</span></div>
        <div class="tags"><p>楼层:</p><span>{{detailObject.floor}}</span></div>
        <div class="tags"><p>类型:</p><span>普通住宅</span></div>
      </div>
     </div>
     <div class="map">
        <div class="mapTitle">小区: <span>{{detailObject.community}}</span></div>
        <div class="mapInfo">
           <baidu-map :center="{lng: detailObject.coord.longitude, lat: detailObject.coord.latitude}" :zoom="zoom" class="bm-view" ak="oek2hHpa3PhlyQe2WYDz5xtiIexpaeqi">
            <bm-label :content="detailObject.community || '暂无信息'" :position="{lng: detailObject.coord.longitude, lat: detailObject.coord.latitude}" :labelStyle="normalClass" ></bm-label>
           </baidu-map>
        </div>
     </div>
     <div class="supporting">
      <div class="supTitle">房屋配套</div>
      <div  v-if="moresuport.length!==0"  class="supicon">
         <div class="iconfontName" v-for="(iconList,index) in moresuport" :key="index">
            <span :class="`iconfont icon-${iconList.py}`"></span>
            <p>{{iconList.name}}</p>
         </div>
      </div>
      <div v-else class="emptyNum">暂无数据</div>
     </div>
     <div class="houseAboutInfo">
      <div class="titleAbout">房源概况</div>
      <div class="contentAbout">
        <div class="top">
          <div class="pic"><img src="https://api-haoke-web.itheima.net/img/avatar.png"></div>
          <div class="sendinfo">
            <div class="name">
              <div class="lady">王女士</div>
              <div class="confirm"><span class="iconfont icon-anquan"></span><i>已认证房主</i></div>
            </div>
            <p>发消息</p>
            </div>
        </div>
        <div class="bottom">{{detailObject.description}}</div>
      </div>
     </div>
     <div class="yourLike">
      <div class="likeTitle">猜你喜欢</div>
       <div class="leaseList" >
         <div class="pic"><img src="http://liufusong.top:8080/img/message/1.png" alt=""></div>
           <div class="context">
             <div><h3>安贞西里 3室1厅</h3></div>
             <p>72.32㎡/南 北/低楼层</p>
             <div class="tags"><span>随时看房</span></div>
            <i><b>3999</b>元/月</i>
        </div>
      </div>
      <div class="leaseList" >
         <div class="pic"><img src="http://liufusong.top:8080/img/message/3.png" alt=""></div>
           <div class="context">
             <div><h3>安贞东里 2室1厅</h3></div>
             <p>100.92㎡/南/高楼层</p>
             <div class="tags"><span>随时看房</span> <span>近地铁</span><span>免费宽带</span></div>
            <i><b>2000</b>元/月</i>
        </div>
      </div>
      <div class="leaseList" >
         <div class="pic"><img src="http://liufusong.top:8080/img/message/2.png" alt=""></div>
           <div class="context">
             <div><h3>安贞北里 4室1厅</h3></div>
             <p>82.32㎡/南 北/低楼层</p>
             <div class="tags"><span>随时看房</span><span>拎包入住</span></div>
            <i><b>5999</b>元/月</i>
        </div>
      </div>
     </div>
     <div class="favorite">
      <div class="love" @click="addOrDeleteFavorite">
        <p v-if="isFavorite"><van-icon name="star" class="red" />已收藏</p>
        <p v-else><van-icon name="star-o"  />收藏</p>
      </div>
      <div class="online">在线咨询</div>
      <div class="phone" @click="callPhone('18302499848')">电话预约</div>
     </div>
  </div>
  <!-- 登录提示框 -->
  <van-dialog v-model="show" title="提示" show-cancel-button confirm-button-text="去登陆" confirm-button-color="#43b978" @confirm="confirmLogin">
    <p>登录后才能收藏房源</p>
  </van-dialog>
  </div>
</template>

<script>
import { BaiduMap, BmLabel } from 'vue-baidu-map'
import { searchDetailAPI, confirmFavoriteAPI, addFavoriteAPI, deleteFavoriteAPI } from '@/api'
import Swiper from '@/components/Swiper'
export default {
  name: 'Detail',
  components: {
    Swiper,
    BaiduMap,
    BmLabel
  },
  data () {
    return {
      // 页面详情对象
      detailObject: {},
      // 轮播图
      swiperData: [],
      // 地图
      center: localStorage.getItem('city') || '北京',
      zoom: 14,
      normalClass: {
        height: '30px',
        lineHeight: '28px',
        border: '1px solid hsla(0,0%,100%,.8)',
        padding: '2px 10px',
        borderRadius: '10%',
        color: '#fff',
        fontSize: '13px',
        background: 'rgba(12,181,106,.9)',
        textAlign: 'center'
      },
      // 更多功能的全部
      iconInfo: [{ name: '洗衣机', py: 'xiyiji' }, { name: '天然气', py: 'meiqitianranqi' }, { name: '暖气', py: 'mingzhuangnuanqi' }, { name: '空调', py: 'kongtiao' }, { name: '热水器', py: 'reshuiqi' },
        { name: '宽带', py: 'kuandai' }, { name: '电视', py: 'dianshiji' }, { name: '冰箱', py: 'bingxiang' }, { name: '床', py: 'chuang' }, { name: '衣柜', py: 'yigui' }],
      // 收藏
      isFavorite: null,
      // 登录提示
      show: false
    }
  },
  created () {
    this.getDetailInfo()
    // console.log(localStorage.getItem('city'))
    // console.log(localStorage.getItem('TOKEN'))
    /* eslint-disable */
    // console.log([] == '0') //false
    /* eslint-enable */
  },
  methods: {
    // 获取用户信息
    async getDetailInfo () {
      try {
        this.$Toast.loading({ duration: 0, forbidClick: true, message: '加载中...' })
        const res = await searchDetailAPI(this.$route.params.value)
        this.detailObject = res.data.body
        // console.log(this.detailObject)
        // 轮播图
        res.data.body.houseImg.forEach(item => {
          // // console.log(item)
          // this.$set(this.imgs, 'imgSrc', item)
          // // console.log({ ...this.imgs })
          // this.swiperData.push({ ...this.imgs }) // 必须要拷贝出来才行
          this.swiperData.push({ imgSrc: item })
        })
        if (localStorage.getItem('TOKEN')) {
          // 查询收藏
          const love = await confirmFavoriteAPI(this.$route.params.value)
          this.isFavorite = love.data.body.isFavorite
          // console.log(love.data)
        }
        this.$Toast.clear()
        return Promise.resolve(res)
      } catch (error) {
        return Promise.reject(error)
      }
    },
    // 收藏功能
    async addOrDeleteFavorite () {
      if (localStorage.getItem('TOKEN')) {
        if (this.isFavorite === false) await addFavoriteAPI(this.$route.params.value)
        else await deleteFavoriteAPI(this.$route.params.value)
        this.isFavorite = !this.isFavorite
      } else {
        this.show = true
      }
    },
    // 收藏登录
    confirmLogin () {
      this.$router.push('/login')
    },
    // 电话资讯
    callPhone (phone) {
      window.location.href = 'tel://' + phone
    }
  },
  computed: {
    // 赛选后的icon数组
    moresuport () {
      return this.iconInfo.filter(item => this.detailObject.supporting.includes(item.name)) || []
    }
  }
}
</script>

<style lang="less" scoped>
.detail{
  background-color: #f5f6f5;
  .navBar{
  width: 100%;
  height: 40px;
  position: sticky;
  top: 0;
  left: 0;
  z-index: 10000;
  background-color: #43b978;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 18px;
  padding: 0 15px;
  color: #fff;
  .van-icon{
    font-size: 16px;

  }
}
  .swiper{
  height: 212px;
}
  .detailInfo{
    width: 100%;
    height: 255px;
    padding: 15px;
    background-color: #fff;
    margin-bottom: 15px;
    .top{
      height: 85px;
      padding-top: 16px;
      border-bottom: 2px solid rgb(221, 221, 221);
      p{
        font-size: 16px;
        color: #333;
        // margin: 16px 0;
        margin-bottom: 16px;
        height: 18px;
         /* 第一步：让文字强制一行显示 */
         white-space: nowrap;
         /* 第二步：溢出隐藏 */
         overflow: hidden;
         /* 第三步：溢出的内容省略号显示 */
         text-overflow: ellipsis;
      }
      .tags{
            display: flex;
        span{
        display: block;
        height: 22px;
        text-align: center;
        line-height: 22px;
        font-size:12px ;
        color: #39becd;
        background-color: #e1f5f8;
        border-radius: 3px;
        margin-bottom: 3px;
        margin-right: 5px;
      }
      }
    }
    .middle{
    width: 100%;
    height: 77px;
    display: flex;
    justify-content: space-around;
    border-bottom: 2px solid rgb(221, 221, 221);
   .item{
    margin: 15px 0;
    display: flex;
    flex-direction: column;
    align-content: center;
    align-items: center;
     p{
      font-size: 18px;
      color: #fa5741;
      margin-bottom: 3px;
      i{
        font-size: 12px;
      }
    }
    span{
      font-size: 14px;
      color: #999;
    }

   }

    }
    .bottom{
      display: flex;
      flex-wrap: wrap;
      width: 100%;
      padding-top: 10px;
      .tags{
        width: 168px;
        font-size: 13px;
        display: flex;
        justify-content: start;
        padding: 5px 0;
        p{
          color: #999;
          margin-right: 15px;
        }
        span{
          color: #333;
        }
      }
    }
  }
  // 地图
  .map{
    width: 100%;
    height: 190px;
    background: #fff;
    .mapTitle{
      height: 45px;
      line-height: 45px;
      font-size: 14px;
      color: #666;
      padding: 0 12px;
      span{
        color: #444;
      }
    }
    .mapInfo{
      width: 100%;
      height: 145px;
      background-color:#f5f6f5;
      .bm-view {
       width: 375px;
       height: 145px;
     }
    }
  }
  // 更多
  .supporting{
    background-color: #fff;
    margin-top: 10px;
      padding: 0 10px;
    .supTitle{
      width: 100%;
      height: 45px;
      line-height: 45px;
      font-size: 15px;
      color: #333;
      font-weight: bold;
      border-bottom: 2px solid rgb(221, 221, 221);
    }
    .supicon{
      display: flex;
      flex-wrap: wrap;
      justify-content: start;
      .iconfontName{
         width: 70px;
         height: 71px;
         font-size: 14px;
         color: #333;
         padding: 5px 0;
         text-align: center;
         .iconfont{
           font-size: 20px;
         }
         p{
           margin-top: 7px;
         }
         }
    }
    .emptyNum{
      font-size: 16px;
      padding: 12px 0;
    }

  }
  // 房子概况
  .houseAboutInfo{
    margin-top: 15px;
    background-color: #fff;
     padding:10px;
    .titleAbout{
      height: 45px;
      line-height: 45px;
      font-size:15px ;
      font-weight: bold;
      color: #333;
      border-bottom: 2px solid rgb(221, 221, 221);
    }
    .contentAbout{
      margin: 13px 0;
      .top{
        display: flex;
        align-items: center;
        justify-content: space-between;
        height: 70px;
        padding: 0 10px;
        .pic{
          width: 50px;
          height: 50px;
          background-color: #fff;
          border-radius: 50%;
          img{
            width: 100%;
            height: 100%;
            border-radius: 50%;
          }
        }
        .sendinfo{
          flex: 1;
          display: flex;
          justify-content: space-between;
          align-items: center;
            margin-left: 10px;
          .lady{
            font-size: 14px;
            color: #333;
          }
          .confirm{
            font-size: 12px;
            text-align: center;
            line-height: 15px;
            height: 15px;
            margin-top: 7px;
            color: #fa5741;
          }
           p{
             font-size: 14px;
             color: #33be85;
             border: 1px solid #33be85;
             border-radius: 3px;
             padding: 3px 15px;
             margin-right: 10px;
           }

        }

      }
      .bottom{
        width: 100%;
        font-size: 14px;
        text-indent: 2em;
        margin-top: 10px;
      }
    }

  }
  // 猜你喜欢
  .yourLike{
    background-color: #fff;
    padding: 10px;
    margin-top: 15px;
    .likeTitle{
      height: 45px;
      line-height: 45px;
      font-size:15px ;
      font-weight: bold;
      color: #333;
      border-bottom: 2px solid rgb(221, 221, 221);
    }
    .leaseList{
    display: flex;
    align-items: center;
    width: 100%;
    height: 100px;
    margin-top: 10px;
    padding-bottom: 15px;
    border-bottom: .7px solid #ccc;
    &:nth-last-child(1){
      border-bottom:none;
      padding-bottom: 0;
    }
    .pic{
      width: 106px;
      height: 80px;
      img{
        width: 100%;
        height: 100%;
      }
    }
    .context{
      height: 80px;
      margin-left: 15px;
      h3{
        color: #394043;
        font-size: 15px;
        width:230px;
        margin-bottom: 5px;
          /* 第一步：让文字强制一行显示 */
         white-space: nowrap;
         /* 第二步：溢出隐藏 */
         overflow: hidden;
         /* 第三步：溢出的内容省略号显示 */
         text-overflow: ellipsis;
      }
      p{
        font-size: 12px;
        color: #afb2b3;
        margin-bottom: 3px;
        width:230px;
        height: 15px;
      }
      .tags{
        display: flex;
        width: 230px;
        overflow: hidden;
        span{
        display: block;
        height: 22px;
        text-align: center;
        line-height: 22px;
        font-size:12px ;
        color: #39becd;
        background: #e1f5f8;
        border-radius: 3px;
        margin-right: 5px;
      }
      }
      i{
        font-size: 12px;
        color:#fa5741 ;
        b{
          font-weight: bold;
          font-size: 16px;
        }
      }
    }
  }
  }
  .favorite{
    position: sticky;
    display: flex;
    align-items: center;
    bottom: 0;
    right: 0;
    width: 100%;
    height: 50px;
    background-color: #fff;
    font-size: 17px;
    color: #999;
    border-top: 1px solid rgb(231, 231, 231);
    div{
      border-right: 1px solid rgb(221, 221, 221);
    }
    div:nth-last-child(1){
      border-right: none;
    }
    .phone{
      flex: 1;
      background-color: #43b978;
      height: 100%;
      text-align: center;
      line-height: 50px;
      color: #fff;
    }
    .love{
      flex: 1;
      height: 100%;
      text-align: center;
      line-height: 50px;
      .van-icon{
        margin-right: 5px;
      }
      .red{
        color: red;
      }
    }
    .online{
      flex: 1;
      height: 100%;
      text-align: center;
      line-height: 50px;
    }
  }
  .van-dialog{
    text-align: center;
    font-size: 15px;
    p{
      margin: 15px 0;
    }
  }

}

</style>
